<template>
    <div class="edit-popup">
        <van-cell title="我的频道">
            <van-button size="small" round class="edit-btn" @click="isedit=!isedit">{{isedit?'完成':'编辑'}}</van-button>
        </van-cell>
        <div class="my-pannel">
            <van-grid :border="false">
                <van-grid-item :text="obj.name" v-for="(obj,index) in myChannels" :key="obj.id"
                    :class="{active:constantChannels.includes(obj.name)}" @click="onMyChange(obj,index)">
                    <template #icon>
                        <van-icon name="cross" v-if="isedit&&!constantChannels.includes(obj.name)" />
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
        <van-cell title="推荐频道">
        </van-cell>
        <div class="recommend-pannel">
            <van-grid :border="false">
                <van-grid-item :text="item.name" v-for="item in recommendChannels" :key="item.id"
                    @click="addchannels(item)">
                    <template #icon>
                        <van-icon name="plus" />
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script>
import { getAllChannelsAPI } from '@/api'
export default {
    props: {
        myChannels: {
            type: Array,
            required: true
        }
    },
    created() {
        this.getAllChannles()
    },
    //表格代替硬编码
    data() {
        return {
            isedit: false,
            constantChannels: ['推荐'],
            AllChannels: []
        }
    },
    computed: {
        recommendChannels() {
            const isIncludeInMychannels = (id) => !!this.myChannels.find(item => item.id === id)
            return this.AllChannels.filter(item => !isIncludeInMychannels(item.id))
        }
    },
    methods: {
        async getAllChannles() {
            const { data } = await getAllChannelsAPI()
            this.AllChannels = data.data.channels
        },
        onMyChange({ id, name }, index) {
            if (this.isedit) {
                if (!this.constantChannels.includes(name)) {
                    this.$emit('deldata-channels', id)
                }
            } else {
                this.$emit('updata-active', index)
            }
        },
            addchannels(item) {
                this.$emit('add-channels', item)
            }
    }
}
</script>

<style lang="less" scoped>
.edit-popup {
    padding-top: 1.33333rem;
}

.edit-btn {
    border-color: red;
    color: red;
    width: 1.38667rem;
    height: 0.64rem;
}

:deep(.van-grid-item__content) {
    width: 175px;
    height: 86px;
    margin: 0 auto 10px;
    background-color: #f4f5f6;
}

.my-pannel {

    // 编辑按钮
    .editBtn {
        width: 104px;
        height: 48px;
        border-color: red;
        color: red;
    }

    // 编辑按钮居中
    .van-cell__value {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    // 关闭按钮样式
    :deep(.van-grid-item__content) {
        position: relative;

        .van-grid-item__icon-wrapper {
            position: absolute;
            top: 0;
            right: 0;

            .van-icon-cross {
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(20%, -35%);
                border: 0.02667rem solid #000;
                border-radius: 50%;
                text-align: center;
                line-height: 0.32rem;
                font-size: 0.32rem;
            }
        }
    }
}

// 推荐频道
.recommend-pannel {

    // 推荐频道加号样式
    :deep(.van-grid-item__content) {
        flex-direction: row;

        .van-grid-item__icon {
            font-size: 0.32rem;
        }

        .van-grid-item__text {
            margin-top: 0;
        }
    }

    .van-icon-plus {
        font-size: 0.32rem;
    }
}

.active {
    :deep(.van-grid-item__text) {
        color: red;
    }
}
</style>